<template>
  <div class="sm-contice">
    <n-badge dot :show="!content.isRead">
      <div class="head">
        <div class="discuss">
          {{ content.title }}
        </div>
        <div class="do">
          <div class="time">{{ time }}</div>
          <i class="iconfont icon-shanchu del" @click="delContice">删除</i>
        </div>
      </div>
      <div class="content">
        <v-md-editor
          ref="markdown"
          :mode="'preview'"
          :height="'auto'"
          v-model="content.content"
        ></v-md-editor>
      </div>
    </n-badge>
  </div>
</template>

<script>
import { delOneNoticeAPI } from "@/api/ojAPI/ojAPI.js";
export default {
  emits: ["getNotice", "getMine"],
  props: {
    content: {
      type: Object,
      default: {},
    },
    type: String,
  },

  data() {
    return {
      noticeType: null,
      delTime: null,
    };
  },
  computed: {
    time() {
      var startDate = new Date(this.content.createTime); // 将起始日期字符串转换为Date对象
      var endDate = new Date(); // 将结束日期字符串转换为Date对象

      if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
        return "无效的日期格式"; // 如果输入的日期不合法，返回错误信息
      } else if (startDate > endDate) {
        return "开始日期必须小于或等于结束日期"; // 如果开始日期大于结束日期，返回错误信息
      } else {
        var validDays = Math.floor((endDate - startDate) / 1000); // 计算相差的天数并取整
        if (validDays > 60) {
          validDays = Math.floor(validDays / 60);
          if (validDays > 60) {
            validDays = Math.floor(validDays / 60);
            if (validDays > 24) {
              validDays = Math.floor(validDays / 24);
              if (validDays > 30) {
                validDays = Math.floor(validDays / 30);
                if (validDays > 12) {
                  validDays = Math.floor(validDays / 12);
                  if (validDays > 100) {
                    validDays = Math.floor(validDays / 100);
                    return validDays + "世纪前";
                  } else {
                    return validDays + "年前";
                  }
                } else {
                  return validDays + "月前";
                }
              } else {
                return validDays + "天前";
              }
            } else {
              return validDays + "小时前";
            }
          } else {
            return validDays + "分钟前";
          }
        } else {
          return validDays + "秒前"; // 返回有效天数
        }
      }
    },
  },
  mounted() {
    this.showType();
  },

  methods: {
    showType() {
      switch (this.type) {
        case "sys":
          this.noticeType = 3;
          return;
        case "mine":
          this.noticeType = 4;
          return;
      }
    },
    delContice() {
      if (this.delTime) {
        clearTimeout(this.delTime);
      }
      this.delTime = setTimeout(() => {
        this.delOneNotice();
      }, 300);
    },
    async delOneNotice() {
      let data = new FormData();
      data.append("targetId", this.content.id);
      data.append("type", this.noticeType);
      await delOneNoticeAPI(data).then((res) => {
        if (res.data.code === 200) {
          if (this.noticeType === 3) {
            this.$emit("getNotice");
          } else if (this.noticeType === 4) {
            this.$emit("getMine");
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.sm-contice {
  width: 90%;
  padding: 10px;
  margin: 5px auto;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 10, 32, 0.1), 0 2px 8px rgba(0, 10, 32, 0.05);
  transition: box-shadow 0.3s ease-in-out 0s;
  .n-badge {
    width: 100%;
    display: block;
    .head {
      display: flex;
      align-items: center;
      .discuss {
        font-size: 1.1em;
        color: #99a;
        margin-left: 13px;
      }
      .do {
        display: flex;
        margin-left: 10px;
        align-items: center;
        .time {
          color: #666;
          font-size: 12px;
        }
        .del {
          margin-left: 10px;
          padding-top: 2px;
          color: #999;
          font-size: 12px;
          cursor: pointer;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
        }
        .del:hover {
          color: #d03050;
        }
      }
    }
    .content {
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 20px;
      font-size: 1.0875em;
      font-weight: 400;
      color: #585353;
      p {
        font-size: 15px;
        word-wrap: break-word;
        word-break: break-word;
        line-height: 1.8;
      }
    }
  }
}
::v-deep(.github-markdown-body) {
  padding: 0px 0px;
}
</style>
